<template>
  <div class="vue-main">
    <component
      v-for="oneComponent in aladdinComponents"
      :key="oneComponent.id"
      :is="oneComponent.name"
      :data-component-id="oneComponent.id"
      :data-component-name="oneComponent.name"
      :config="oneComponent.data">
    </component>
  </div>
<!--  <div class="home-container">-->
<!--    <div class="content">-->
<!--      <div class="content_item" :class="curSelect==item.id?'opacity':''" v-for="(item,index) in btns" :key="index" @touchstart="touchstart(index)" @touchend="touchend">-->
<!--        <img :src="item.btnurl" width="40" height="40" >-->
<!--        {{item.name}}-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->

</template>

<script>
import 'static/css/app.less';
import mycomponents from './config/components';

export default {

  components: {
    'aladdin-home-demo': () => import('comp/aladdin-home-demo'),
    'aladdin-header-demo': () => import('comp/aladdin-header-demo'),
    'aladdin-info-demo': () => import('comp/aladdin-info-demo'),
    'aladdin-gap-demo': () => import('comp/aladdin-gap-demo'),
    'aladdin-weather-demo': () => import('comp/aladdin-weather-demo'),
  },

  data() {
    const aladdinComponents = (typeof window !== 'undefined') ?
      window.INIT_DATA || mycomponents : mycomponents;
    return {
      aladdinComponents,
      btns: [{ id: 0, name: '主页模版', btnurl: 'https://wx4.sinaimg.cn/mw1024/8dfbc1begy1ggh89ig4e3j201c01c06s.jpg', btnlink: 'https://www.baidu.com/'
      }, { id: 1, name: '头部模板', btnurl: 'https://wx4.sinaimg.cn/mw1024/8dfbc1begy1ggh89ig4e3j201c01c06s.jpg', btnlink: 'https://www.baidu.com/'
      }, { id: 2, name: '信息区模板', btnurl: 'https://wx4.sinaimg.cn/mw1024/8dfbc1begy1ggh89ig4e3j201c01c06s.jpg', btnlink: 'https://www.baidu.com/'
      }, { id: 3, name: 'gap模版', btnurl: 'https://wx4.sinaimg.cn/mw1024/8dfbc1begy1ggh89ig4e3j201c01c06s.jpg', btnlink: 'https://www.baidu.com/'
      }, { id: 4, name: '天气模版', btnurl: 'https://wx4.sinaimg.cn/mw1024/8dfbc1begy1ggh89ig4e3j201c01c06s.jpg', btnlink: 'https://www.baidu.com/'
      }]
    };
  },
  methods: {
    imgClick() {
      window.location.href = this.config.link;
    },
    btnClick() {
      for (const item of this.config.btns) {
        window.location.href = item.btnlink;
      }
    },
    touchstart(e) {
      const that = this;
      const list = that.btns;
      for (let i = 0, len = list.length; i < len; ++i) {
        if (list[i].id === e) {
          that.curSelect = i;
          window.location.href = list[i].btnlink;
        }
      }
    },
    touchend() {
      const that = this;
      that.curSelect = null;
    }
  }
};
</script>

<style lang="less" scoped>
  .home-container {
    margin: 0 0 16px 0;
    height: 100%;
  }

  .vue-main {
  -webkit-overflow-scrolling: touch;
  height: 100%;
  }

  .vue-main-view {
  -webkit-overflow-scrolling: touch;
  height: 100%;
  }

  .content{
    display: flex;
    align-items: center;
    width:100%;
    flex-wrap: wrap;

    &__img {
      border-radius: 8px;
      max-width: 30px;
      max-height: 30px;
      cursor: pointer;
    }
  }

.content_item{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width:25%;
  padding-top: 10px;
  padding-bottom: 10px;
}

.opacity{
  opacity: 0.4;
  background: #e5e5e5;
}
.content_item img{
  margin-bottom: 3px;
  display: block;
}
</style>
